<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pangtang --Home--</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <script src="js/effect.js"></script>
    <!-- <script src="js/fadeIn.js"></script> -->
</head>

<body class="preload">
    <!-- Start of navigation section -->
    <nav class="clearfix">
        <a href="index.html"><img class="logo" src="img/logo.png" alt="logo"></a>

        <input type="checkbox" id="toggle">
        <label for="toggle" class="iconfont icon-toggle"></label>
        <i class="iconfont icon-icons- fr nav_wechat"></i>
        <ul class="navbar fr">
                <li class="active"><a href="index.html">
                        <h2>Home </h2><span>ホーム</span>
                    </a> </li>
                <li><a href="game.html">
                        <h2>Game</h2><span>ゲーム</span>
                    </a> </li>
                <li><a href="case.html">
                        <h2>Case</h2><span>ケース</span>
                    </a> </li>
                <li><a href="#">
                        <h2>About Us</h2><span>本社について</span>
                    </a> </li>
                    <li><a href="account.html">
                            <h2>Account</h2><span>アカウント</span>
                        </a> </li>
            </ul>

    </nav>
    <!-- End of navigation section -->

    <!-- Start of kv -->
    <section class="kv">
        <div class="frame">
            <div class="try_section">
                <a href="#" class="try">Try it out! <i class="iconfont icon-sanjiao-you-f"></i></a>
                <p>Lorem, ipsum dolor sit amet consectetur rem sunt!</p>
            </div>

            <div class="phone">
                <img src="img/phone.png" alt="phone" class="phone_img">
                <div class="carousel" id="carousel">
                    <div class="carousel_frame" id="carousel_frame">
                        <ul class="carousel_bar clearfix" id="carousel_bar">
                            <li><img src="img/game1.png" alt="game1"></li>
                            <li><img src="img/game2.png" alt="game2"></li>
                            <li><img src="img/game3.png" alt="game3"></li>
                            <li><img src="img/game2.png" alt="game4"></li>
                        </ul>
                    </div>

                    <ul class="dot" id="dot">
                        <li class="active"><i class="iconfont icon-dot"></i></li>
                        <li><i class="iconfont icon-dot"></i></li>
                        <li><i class="iconfont icon-dot"></i></li>
                        <li><i class="iconfont icon-dot"></i></li>
                    </ul>
                </div>


            </div>

            <div class="know_more_section">
                <h3><span class="jump">What</span> <br /><span class="sub">we can bring to our clients</span></h3>
                <p>Lorem, ipsum dolor <br /> sit amet consectetur rem sunt!</p>
                <a href="#" class="know_more">Know more</a>
            </div>

            <div class="icon_section clearfix">
                <div class="left fl">
                    <div class="icon"><a href=""><img src="img/icon_img1.png" alt="icon1"></a></div>
                    <div class="icon"><a href=""><img src="img/icon_img2.png" alt="icon2"></a></div>
                    <div class="icon"><a href=""><img src="img/icon_img3.png" alt="icon3"></a></div>
                    <div class="icon"><a href=""><img src="img/icon_img4.png" alt="icon4"></a></div>
                </div>

                <div class="right fr">
                    <div class="icon"><a href=""><img src="img/icon_img5.png" alt="icon1"></a></div>
                    <div class="icon"><a href=""><img src="img/icon_img6.png" alt="icon2"></a></div>
                    <div class="icon"><a href=""><img src="img/icon_img7.png" alt="icon3"></a></div>
                    <div class="icon"><a href=""><img src="img/icon_img8.png" alt="icon4"></a></div>
                </div>
            </div>

        </div>
    </section>
    <!-- End of kv -->
    <div class="content_frame">

        <!-- Start of step -->
        <section class="step_section clearfix fade-in-l">
            <div class="step fl">
                <img src="img/step1.png" alt="">
                <h2>STEP ONE</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit?</p>
            </div>
            <i class="iconfont icon-Arrowright fl"></i>
            <div class="step fl">
                <img src="img/step2.png" alt="">
                <h2>THE SECOND STEP</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit?</p>
            </div>
            <i class="iconfont icon-Arrowright fl"></i>
            <div class="step fl">
                <img src="img/step3.png" alt="">
                <h2>THE THIRD STEP</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit?</p>
            </div>
        </section>
        <!-- End of step -->

        <!-- Start of turn games -->
        <section class="section fade-in-r">
            <h2 class="title">TURN MADE GAMES</h2>
            <p class="title_d">Lorem ipsum dolor sit. <br /> Amet consectetur adipisicing elit?</p>
            <p class="sub_title"><span>ターン</span>ゲーム</p>
            <div class="section_box clearfix">
                <div class="game fl">
                    <div class="game_description">
                        <h3>Game1</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>
                        <!-- <p></p> -->
                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/game1.png" alt="game1">
                    </div>

                </div>
                <div class="game">
                    <div class="game_description">
                        <h3>Game2</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>
                        <!-- <p></p> -->
                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/game2.png" alt="game2">
                    </div>

                </div>
                <div class="game fr">
                    <div class="game_description">
                        <h3>Game3</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>
                        <!-- <p></p> -->
                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/game3.png" alt="game3">
                    </div>

                </div>
            </div>

        </section>
        <!-- End of turn games -->


        <!-- Start of lottery games -->
        <section class="section fade-in-l">
            <h2 class="title">LOTTERY GAMES</h2>
            <p class="title_d">Lorem ipsum dolor sit. <br /> Amet consectetur adipisicing elit?</p>
            <p class="sub_title"><span>宝くじ</span>ゲーム</p>
            <div class="section_box clearfix">
                <div class="game fl">
                    <div class="game_description">
                        <h3>Game1</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>
                        <!-- <p></p> -->
                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/lottery1.png" alt="lottery1">
                    </div>

                </div>
                <div class="game">
                    <div class="game_description">
                        <h3>Game2</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>
                        <!-- <p></p> -->
                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/lottery2.png" alt="lottery2">
                    </div>

                </div>
                <div class="game fr">
                    <div class="game_description">
                        <h3>Game3</h3>
                        <p>2014-07-09 <br /> Purchased:20</p>
                        <!-- <p></p> -->
                        <a class="purchase" href="game_info.html">Buy</a>
                        <i class="iconfont icon-star"></i>
                    </div>
                    <div class="game_img_frame">
                        <img src="img/lottery3.png" alt="lottery3">
                    </div>

                </div>
            </div>

        </section>
        <!-- End of lottery games -->


        <!-- Start of case -->
        <section class="section fade-in-r">
            <h2 class="title">OUR WORKS</h2>
            <p class="title_d">Lorem ipsum dolor sit. <br /> Amet consectetur adipisicing elit?</p>
            <p class="sub_title"><span>我々の成し遂げた</span>プロジェクト</p>
            <div class="section_box">
                <div class="row clearfix">
                    <div class="case fl clearfix">
                        <div class="fl">
                            <div class="company_logo">
                                <img src="img/air_south.png" alt="logo">
                            </div>
                            <div class="date">
                                <p>
                                    24 <span>October</span>
                                </p>

                            </div>
                            <i class="iconfont icon-star1"></i>
                        </div>
                        <div class="case_detail fl">
                            <h3>China Southern</h3>
                            <p>Flight competition <br /> 2014/05/14--2014/5/27 <br /> Lorem ipsum dolor sit amet
                                consectetur adipisicing elit</p>
                        </div>
                        <div class="case_img fl">
                            <img src="img/plane.png" alt="plane">
                        </div>

                    </div>


                    <div class="case fr clearfix">
                        <div class="fl">
                            <div class="company_logo">
                                <img src="img/air_south.png" alt="logo">
                            </div>
                            <div class="date">
                                <p>
                                    24 <span>October</span>
                                </p>

                            </div>
                            <i class="iconfont icon-star1"></i>
                        </div>
                        <div class="case_detail fl">
                            <h3>China Southern</h3>
                            <p>Flight competition <br /> 2014/05/14--2014/5/27 <br /> Lorem ipsum dolor sit amet
                                consectetur adipisicing elit</p>
                        </div>
                        <div class="case_img fl">
                            <img src="img/plane.png" alt="plane">
                        </div>

                    </div>
                </div>




                <div class="row clearfix">
                        <div class="case fl clearfix">
                            <div class="fl">
                                <div class="company_logo">
                                    <img src="img/air_south.png" alt="logo">
                                </div>
                                <div class="date">
                                    <p>
                                        24 <span>October</span>
                                    </p>
    
                                </div>
                                <i class="iconfont icon-star1"></i>
                            </div>
                            <div class="case_detail fl">
                                <h3>China Southern</h3>
                                <p>Flight competition <br /> 2014/05/14--2014/5/27 <br /> Lorem ipsum dolor sit amet
                                    consectetur adipisicing elit</p>
                            </div>
                            <div class="case_img fl">
                                <img src="img/plane.png" alt="plane">
                            </div>
    
                        </div>
    
    
                        <div class="case fr clearfix">
                            <div class="fl">
                                <div class="company_logo">
                                    <img src="img/air_south.png" alt="logo">
                                </div>
                                <div class="date">
                                    <p>
                                        24 <span>October</span>
                                    </p>
    
                                </div>
                                <i class="iconfont icon-star1"></i>
                            </div>
                            <div class="case_detail fl">
                                <h3>China Southern</h3>
                                <p>Flight competition <br /> 2014/05/14--2014/5/27 <br /> Lorem ipsum dolor sit amet
                                    consectetur adipisicing elit</p>
                            </div>
                            <div class="case_img fl">
                                <img src="img/plane.png" alt="plane">
                            </div>
    
                        </div>
                    </div>

            </div>
        </section>
        <!-- End of case -->
    </div>


    <!-- Start of footer -->
    <footer>
        
        <img src="img/footer_cane.png" alt="cane" class="footer_cane">
        <img src="img/bg_tower.png" alt="tower" class="footer_tower">
        <p>Copyright © 2014 Pangtang. All Rights Reserved. </p>
    </footer>
    <!-- End of footer -->

</body>

</html>